<template>
  <el-menu
    class="frame-nav__bar-menu"
    @select="handleSelect"
    @open="handleOpen"
    @close="handleClose"
    :background-color="isMore ? '#fff' : '#2F4858'"
    :collapse="collapse"
    :text-color="isMore ? '#595959' : '#fff'"
    :collapse-transition="false"
    :default-active="defaultActive"
    :unique-opened="uniqueOpened"
    :default-openeds="defaultOpeneds"
    active-text-color="isMore ? '#303133' : #fff">
    <bar-menu-tree
      :menus="menus"
      :is-more="isMore"
      :is-color-scheme="isColorScheme"
      :highlight-text="highlightText"></bar-menu-tree>
  </el-menu>
</template>
 
<script>
import { platform } from '@src/platform';
import BarMenuTree from './BarMenuTree.vue';
import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import _ from 'lodash';
import { getUserGuideStorageFor, setUserGuideStorage } from '@src/api/GuideApi';
import { isHavePortalPageViewAuth, isHaveCustomReportPageSetAuth } from '@service/AuthService.ts';
export default {
  name: 'bar-menu',
  components: {
    BarMenuTree,
  },
  props: {
    isColorScheme: {
      type: Object,
      default: ()=> {}
    },
    isMore: {
      type: Boolean,
      default: false
    },
    collapse: {
      type: Boolean,
      default: false
    },
    menus: {
      type: Array,
      default: () => ([])
    },
    defaultActive: {
      type: String,
      default: '',
    },
    uniqueOpened: {
      type: Boolean,
      default: true
    },
    defaultOpeneds: {
      type: Array,
      default: () => ([])
    },
    highlightText: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      currentPageInfo: {}
    }

  },
	computed: {
		menuMap() {
			const mapList = new Map();

			const flat = (menu, listMap) => {
				menu.forEach(item => {
					listMap.set(item.menuKey, item.name);
					if(item.menuList && item.menuList.length) {
						flat(item.menuList, listMap);
					}
				});
			}
			flat(_.cloneDeep(this.menus), mapList);

			return mapList;
		},
    // 需要引导集合
    PageInfoType() {
      return [
        {
          key:'M_DOOR_MENU',
          domMenukey:'M_PORTAL_PAGE',
          type :'M_PORTAL_PAGE_VIEW',
          tips: this.$t('component.guide.M_PORTAL_PAGE_VIEW'),
          isHaveAuth: isHavePortalPageViewAuth(),
        },
        {
          key:'M_TOP_REPORT',
          domMenukey:'M_SMART_REPORT',
          type :'M_SMART_REPORT',
          tips: this.$t('component.guide.M_SMART_REPORT'),
          isHaveAuth: isHaveCustomReportPageSetAuth()
        }
      ]
    }
	},
  methods: {
    handleSelect(key, keyPath) {
			this.menuTrack(key, keyPath);
      // if(key === 'M_SYSTEM') {
      //   openAccurateTab({
      //     type: PageRoutesTypeEnum.PageFoundationSetting
      //   })
      // }
    },
    handleOpen(key, keyPath) {
      this.currentPageInfo = this.PageInfoType.find(item=> item.key === key) || {};
      if(Object.keys(this.currentPageInfo).length > 0) {
        this.doorMenuClick()
      }
			this.menuTrack(key, keyPath);
    },
    handleClose(key, keyPath) {
			this.menuTrack(key, keyPath);
    },
		menuTrack(key, keyPath) {
			const level = keyPath.length;
			this.$track.clickStat(this.$track.formatParams(`MENU_${level}`, this.menuMap.get(key)))
		},
    doorMenuClick() {
      this.$nextTick(async ()=>{
        const dom = document.querySelector(`.menuKey-${this.currentPageInfo.domMenukey}`)
        if(this.currentPageInfo.isHaveAuth && dom) {
          const type = this.currentPageInfo.type;
          this.queryUserGuide(type, dom, this.initPortalPageViewGuide)
        }
      })
    },
    async queryUserGuide(type, dom, callBack) {
      try {
        const { status, data } = await getUserGuideStorageFor({ type })
        if(status == 0 && data && !data.isComplete){
          callBack(type, dom)
        }
      } catch (error) {
        console.error('catch', error);
      }
    },
    initPortalPageViewGuide(type, dom) {
      let lastFinish = 1;
      let arr = [
        {
          content: this.currentPageInfo.tips,
          haveStep: false,
          nowStep: 1,
          left:50,
          domObj: () => {
            return dom
          },
          needCover: true,
          lastFinish,
          show: true,
        }
      ]
      this.$Guide(arr, 0, '', e => {
        return new Promise((resolve) => {
          resolve();
        });
      })
        .create()
        .then(vueDom => {
          if (vueDom) {
            const params = {}
            params.type = type
            params.step = 1
            params.isComplete = 1
            params.desc = ''
            setUserGuideStorage(params)
          }
        });
    }
  }, 
}
</script>
<style lang="scss">
.frame-nav__bar-menu {

  .el-menu-item:hover,
  .el-menu-item:active {
    // color: #fff!important;
  }

  .el-menu--collapse .el-submenu__title .icon{
    margin-right: 16px;
  }

  .el-submenu__title {
    padding: 0 0 0 16px!important;
    .icon {
      width: 16px;
      color: #fff;
      margin-right: 4px;
    }
    i {
      color: #fff;
    }
  }

  .el-menu-item {
    i {
      color: #fff;
    }
  }

  .title {
    display: inline-block;
    width: 120px;
    font-size: 14px;
    @include text-ellipsis();
    .text-highlight{
      display: inline-block;
      color: $color-primary;
      background: transparent;
      line-height: 0;
      margin-top: -2px;
    }
  }

  .el-submenu__icon-arrow {
    font-size: 16px;
    right: 16px;
  }

  .child-menu {
    width: 220px;
    background: #ffffff;
    box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);
    border-radius: 4px;
    // border: 1px solid #e8e8e8;
    // max-height: 600px;
    // overflow-y: auto;
  
    .el-menu--popup-right-start {
      margin-left: 0;
      margin-right: 0;
    }
    .el-menu--popup{
      background: #fff!important;
      .el-menu {
        background-color: #fff!important;
      }
      .el-menu-item,
      .el-submenu__title{
        color: #262626!important;
        background: #fff!important;
        i {
          color: #999;
        }
      }
      .el-menu-item:hover {
        background: rgba(191, 191, 191, 0.3)!important;
      }
      .el-menu-item:active {
        background: $color-primary!important;
        color: #fff!important;
      }

    }
  }
  .child-menu .el-menu--popup-right-start::-webkit-scrollbar {
    width: 0 !important 
  }
}
.frame-nav:not(.frame-nav-expand) {
  .title {
    display: none;
  }
}
// 以前更多里面没有三级，菜单。
// 一下样式对齐二级菜单的padding，本来是40px，变为36px的原因就是文字左边有个i占据了位置，更改vue太麻烦了，所以减去4
.frame-nav__bar-menu-tree-more .frame-nav-bg-level-2 {
  .el-submenu__title {
    padding-left: 52px !important;
    display: block;
  }
  .el-menu-item {
    padding-left: 56px !important;
  }
  .frame-nav__bar-menu-tree-more.frame-nav-bg-level-3 {
    .el-menu-item {
      padding-left: 68px !important;
    }
  }
}
</style>
